<template>
  <div class="app">
    <div class="title">
      日志管理
    </div>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
export default {
  data() {
    return {
      dialogVisible: false,
      queryForm: { current: 20, offset: 1 },
      form: { dictName: null, dictType: null, remark: null },
      tableData: [],
      columns: [
        {
          title: '字典名称',
          dataIndex: 'dictName',
          key: 'dictName',
        },
        {
          title: '字典类型',
          dataIndex: 'dictType',
          key: 'dictType',
        },
        {
          title: '备注',
          dataIndex: 'remark',
          key: 'remark',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19 },
      },
      formTailLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 19, offset: 4 },
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const url = '/government-platform-center/dictType'
      const params = this.queryForm
      this.$axios
        .get(url, {
          params: params,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.tableData = res.data.data
          }
        })
    },
    editFn(text, record) {
      console.log(text, record)
      const that = this
      Modal.confirm({
        title: '确认删除',
        content: '您确定要删除这项内容吗？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          const url = `/government-platform-center/dictType/deleteById?id=${text.dictId}`
          that.$axios.post(url).then((res) => {
            if (res.data.code == 0) {
              that.getList()
            }
          })
        },
        onCancel() {
          // 在此处理取消逻辑
          console.log('删除已取消')
        },
      })
    },
    goData(text, record) {
      this.$router.push({
        path: `/dictData`,
        query: { dictType: text.dictType },
      })
    },
    addFn() {
      this.dialogVisible = true
    },
    putDict() {
      if (!this.form.id) {
        const url = '/government-platform-center/dictType'
        this.$axios
          .post(url, this.form, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.getList()
              this.reSetForm()
              this.dialogVisible = false
            }
          })
      }
    },
    reSetForm() {
      this.form = { dictName: null, dictType: null, remark: null }
    },
  },
}
</script>

<style lang="scss" scoped>


.ant-row {
  border-radius: 5px;

  background: #fff;
  padding: 20px;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
</style>
